<template>
  <el-dialog
    top="30px"
    width="1000px"
    append-to-body
    :visible.sync="visible"
    :close-on-click-modal="false"
    :before-close="beforeClose"
  >
    <div class="d-flex justify-content-center align-items-center mb-5">
      <el-button @click="year--" :disabled="lastYear">
        <i class="el-icon-arrow-left el-icon--right"></i>
        <span>上一年</span>
      </el-button>
      <div class="mx-3">{{ year }}年</div>
      <el-button @click="year++" :disabled="nextYear">
        <span>下一年</span>
        <i class="el-icon-arrow-right el-icon--right"></i>
      </el-button>
    </div>
    <g5 v-bind="$attrs" :view-mode="viewMode" @close="beforeClose" :query-year="year"></g5>
  </el-dialog>
</template>

<script>
import G5 from '@/credit/views/city/reportCity/manage/year/g5'
import { isYearDisabled } from '@/credit/views/city/reportCity/manage/year/minxix'
export default {
  components: {
    G5,
  },
  props: {
    visible: Boolean,
    queryYear: Number,
    viewMode: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      year: '',
    }
  },
  computed: {
    lastYear() {
      return isYearDisabled(this.year - 1)
    },
    nextYear() {
      return isYearDisabled(this.year + 1)
    },
  },
  watch: {
    queryYear: {
      handler: function () {
        this.year = this.queryYear
      },
      immediate: true,
    },
  },
  created() {},
  mounted() {},
  methods: {
    beforeClose() {
      this.$emit('update:visible', false)
    },
  },
}
</script>

<style lang="scss" scoped></style>
